<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
		<script>
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
		</script>
		<style>
			html,
			body,
			#app {
				width: 100%;
				height: 100%;
				overflow-x: hidden;
				margin-bottom: 0.3rem;
			}
			
			.store-name {
				margin-top: 1px;
				background-color: #fff;
				color: #000000;
				margin-bottom: 0.05rem;
				padding-left: 0.1rem;
				font-size: 0.22rem;
			}
			
			.store-name>img {
				width: 0.22rem;
				margin-right: 0.1rem;
			}
			/*.store-name span {*/
			/*margin-left: 0.2rem;*/
			/*margin-right: 0.1rem;*/
			/*color: #353535;*/
			/*}*/
			/**/
			
			.income-classification-box {
				background-color: #FFFFFF;
				padding-top: 0.2rem;
				padding-bottom: 0.2rem;
			}
			
			.income-classification>div {
				background-color: #F9F9F9;
				border-radius: 0.2rem;
				text-align: center;
				width: 97%;
				margin: 0 auto;
				border: 1px transparent solid;
			}
			
			.income-classification:nth-of-type(3),
			.income-classification:nth-of-type(4) {
				margin-top: 0.08rem;
			}
			
			.flex {
				display: flex;
			}
			
			.itme-box {
				padding: 0rem 0 0.2rem;
			}
			
			.spot {
				position: absolute;
				width: 0.18rem;
				height: 0.18rem;
				border-radius: 50%;
				background-color: #C9C9C9;
				right: -0.16rem;
			}
			
			.flex-item {
				flex: 1;
			}
			
			.left-item {
				border-right: 1px solid #CCCCCC;
			}
			
			.flex-item p {
				margin: 0.05rem;
				color: #555555;
			}
			
			.class-each {
				font-size: 0.26rem;
				font-weight: bold;
				color: #000000;
				margin: 0.1rem 0 0.06rem;
			}
			
			.total-income {
				font-size: 0.26rem;
				font-weight: bold;
				color: #000000;
				margin: 0 0 0.1rem;
			}
			/**/
			
			.pie-block {
				background-color: #FFFFFF;
				margin-top: 0.1rem;
			}
			
			.line-block {
				background-color: #FFFFFF;
				margin-bottom: 0.7rem;
				/*margin-top: 0.1rem;*/
			}
			
			.light {
				color: #8e8a8a;
				font-size: 0.22rem;
			}
			
			.storeChoose {
				width: 100%;
				/*border: 1px solid #ccc;*/
				font-size: 0.22rem;
				text-align: center;
				overflow: hidden;
				padding: 0.2rem 3%;
				background-color: white;
				margin-top: 0.1rem;
			}
			
			.storeChoose span {
				display: inline-block;
				width: 33%;
				padding: 0.06rem 0;
				float: left;
				border: 1px solid #ccc;
				font-size: 0.2rem;
				background-color: white;
			}
			
			.storeChoose span:nth-child(2) {
				border-right: none;
				border-left: none;
			}
			
			.storeChoose .default {
				background-color: #ccc;
			}
			
			.dotDiv {
				width: 0.4rem;
				position: absolute;
				top: 0.1rem;
				right: 0.2rem;
			}

			.dot {
				width: 4px;
				height: 4px;
				border-radius: 2px;
				background-color: #ccc;
				margin: 0.05rem auto 0;
			}
		</style>
	</head>

	<body>
		<div id="app" class="mui-content">
			<time-check :type='1' :dateType="dateType" :totalNum='(totalData.totalIncome/100).toFixed(2)' :realnum='(totalData.totalIncome/100-totalData.recharge/10-totalData.atmDiamond/10).toFixed(2)' :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
			<p class="store-name"><span class="iconfont icon-iconstoreddetailcompass"></span>{{storeName}}</p>
			<!--<p class="store-name"><img src="../images/WIFI.png" alt="" >本店已开启自动抄表</p>-->
			<div class="income-classification-box mui-row">
				<div class="income-classification mui-col-sm-8 mui-col-xs-8">
					<div style="position: relative;">
						<p class="class-each">ATM销售</p>
						<p class="total-income">{{((totalData.atmCash+totalData.atmWeixin)/100+(totalData.atmDiamond/10)).toFixed(2)}}</p>
						<div class="flex itme-box">
							<div class="flex-item left-item">
								<p class="class-each-item-name light">现金购币</p>
								<p class="class-each-item-num">{{(totalData.atmCash/100).toFixed(2)}}</p>
							</div>
							<div class="flex-item left-item">
								<p class="class-each-item-name light">微信购币</p>
								<p class="class-each-item-num">{{(totalData.atmWeixin/100).toFixed(2)}}</p>
							</div>
							<div class="flex-item">
								<p class="class-each-item-name light">钻石提币</p>
								<p class="class-each-item-num">{{(totalData.atmDiamond/10).toFixed(2)}}</p>
							</div>
						</div>
						<!--<div class="spot"></div>-->
					</div>
				</div>
				<div class="income-classification mui-col-sm-4 mui-col-xs-4">
					<div>
						<p class="class-each">扫码直玩</p>
						<p class="total-income">{{(totalData.recharge/10).toFixed(2)}}</p>
						<div class="flex itme-box">
							<!--<div class="flex-item left-item">
								<p class="class-each-item-name">微信投币</p>
								<p class="class-each-item-num">---</p>
							</div>-->
							<div class="flex-item">
								<p class="class-each-item-name light">耗钻</p>
								<p class="class-each-item-num">{{totalData.recharge}}枚</p>
							</div>
						</div>
					</div>
				</div>
				<div class="income-classification mui-col-sm-12 mui-col-xs-12">
					<div>
						<p class="class-each">吧台销售</p>
						<p class="total-income">{{((totalData.cardCash+totalData.cardWeixin+totalData.cardBank+totalData.cardAlipay+totalData.cardMeituanAmount)/100).toFixed(2)}}</p>
						<div class="flex itme-box">
							<div class="flex-item left-item">
								<p class="class-each-item-name light">现金</p>
								<p class="class-each-item-num">{{(totalData.cardCash/100).toFixed(2)}}</p>
							</div>
							<div class="flex-item left-item">
								<p class="class-each-item-name light">微信</p>
								<p class="class-each-item-num">{{(totalData.cardWeixin/100).toFixed(2)}}</p>
							</div>
							<div class="flex-item left-item">
								<p class="class-each-item-name light">POS机</p>
								<p class="class-each-item-num">{{(totalData.cardBank/100).toFixed(2)}}</p>
							</div>
							<div class="flex-item left-item">
								<p class="class-each-item-name light">支付宝</p>
								<p class="class-each-item-num">{{(totalData.cardAlipay/100).toFixed(2)}}</p>
							</div>
							<div class="flex-item ">
								<p class="class-each-item-name light">美团</p>
								<p class="class-each-item-num">{{(totalData.cardMeituanAmount/100).toFixed(2)}}</p>
							</div>
						</div>
						<div class="dotDiv" @click="toPage('incomeBarDetails')">
							<p class="dot"></p>
							<p class="dot"></p>
							<p class="dot"></p>
						</div>
					</div>
				</div>
			</div>
			<!--饼图-->
			<div class="mui-row pie-block">
				<div class="mui-col-xs-6 mui-col-sm-6">
					<div id="left-pie" style="width: 100%;height:3.5rem;padding-top: 0.2rem"></div>
				</div>
				<div class="mui-col-xs-6 mui-col-sm-6">
					<div id="right-pie" style="width: 100%;height:3.5rem;padding-top: 0.2rem"></div>
				</div>
			</div>
			<!--选择框-->
			<div class="storeChoose">
				<span @click="choose(1)" :class="{default:chooseType ===1}">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}销售额</span>
				<span @click="choose(2)" :class="{default:chooseType ===2}">{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}人均消费</span>
				<span @click="choose(3)" :class="{default:chooseType ===3}">{{(dateType ===0 ? '当天' : dateType ===1 ? '当周' : '当月')}}消费时段分析</span>
			</div>
			<!--line图-->
			<div class="line-block">
				<div id="line-chart" style="width: 100%;height:5rem;"></div>
			</div>

			<div class="bar">
				<p class="borderRight default">收入</p>
				<p class="borderRight" @click="toPage2('coinShopOperated')">收币</p>
				<p class="borderRight" @click="toPage2('rewordShopReport')">返奖</p>
				<p @click="toPage2('lotteryStore')">出票</p>
				<p @click="toPage2('rankingList')">榜单</p>
				<p @click="toPage2('activity')">活动</p>
			</div>

		</div>
		<script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../common/timeCheck.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../config.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						currentShopObj: {},
						actnum: 0,
						fromDate: '',
						toDate: '',
						storeName: '',
						storeId: '',
						dateType: '1',
						totalData: {
							totalIncome: 0,
							atmCash: 0,
							atmWeixin: 0,
							cardCash: 0,
							cardWeixin: 0,
							cardBank: 0,
							cardAlipay: 0,
							recharge: 0,
							dailyIncome: []
						},
						pieOptions1: {
							title: {
								subtext: '销售额构成',
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{b} : {c} ({d}%)",
								triggeron: 'click',
								position: [10, 10],
								textStyle: {
									fontSize: 12
								}
							},
							legend: {
								// orient: 'vertical',
								// top: 'middle',
								bottom: 0,
								left: 'center',
								data: ['ATM销售', '吧台销售', '扫码直玩'],
								itemGap: 5,
								itemWidth: 10,
								itemHeight: 10,
								textStyle: {
									fontSize: 10
								}
							},
							color: ['#4472C4', '#ED7D31', '#a3d609'],
							series: [{
								type: 'pie',
								selectedOffset: 5,
								radius: '60%',
								center: ['50%', '50%'],
								selectedMode: 'single',
								data: [{
										value: 0,
										name: 'ATM销售',
									},
									{
										value: 0,
										name: '吧台销售'
									},
									{
										value: 0,
										name: '扫码直玩'
									},
								],
								itemStyle: {
									normal: {
										label: {
											show: false
										}
									},
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						},
						pieOptions2: {
							title: {
								subtext: '支付渠道分布',
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{b} : {c} ({d}%)",
								triggeron: 'click',
								position: [10, 10],
								textStyle: {
									fontSize: 12
								}
							},
							legend: {
								bottom: 0,
								left: 'center',
								data: ['微信', '现金', '支付宝', 'POS机', '美团'],
								itemGap: 5,
								itemWidth: 10,
								itemHeight: 10,
								textStyle: {
									fontSize: 10
								}
							},
							color: ['#ED7D31', '#FFC000', '#a3d609', '#868686', '#4472C4'],
							series: [{
								type: 'pie',
								selectedOffset: 5,
								radius: '60%',
								center: ['50%', '50%'],
								selectedMode: 'single',
								data: [{
										value: 0,
										name: '微信',
									},
									{
										value: 0,
										name: '现金'
									},
									{
										value: 0,
										name: '支付宝',
									},
									{
										value: 0,
										name: '银行卡'
									},
								],
								itemStyle: {
									normal: {
										label: {
											show: false
										}
									},
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						},
						lineOPtions: {
							title: {
								subtext: '近30日销售额',
								left: 'center',
								textStyle: {
									fontSize: 14,
									fontWeight: 500
								}
							},
							tooltip: {
								trigger: 'axis',
								textStyle: {
									fontSize: 12
								}
							},
							legend: {
								data: ['收入'],
								bottom: 0,
								itemGap: 5,
								itemWidth: 12,
								itemHeight: 12,
								textStyle: {
									fontSize: 12
								}
							},
							feature: {
								dataView: {
									show: true,
									readOnly: false
								}
							},
							calculable: true,
							grid: {
								//          改变边距
								left: '0',
								right: '5%',
								bottom: '10%',
								top: '20%',
								containLabel: true,
								borderColor: '#e2e2e2'
							},
							xAxis: [{
								type: 'category',
								boundaryGap: false,
								splitLine: {
									show: false
								},
								data: [],
								axisLabel: {
									textStyle: {
										color: '#868686',
										fontSize: '8px'
									}
								}
							}],
							yAxis: [{
								type: 'value',
								splitLine: {
									show: true,
									lineStyle: {
										// 使用深浅的间隔色  
										color: ['#b1b1b1'],
										type: 'dotted'
									}
								},
								axisLabel: {
									textStyle: {
										color: '#868686',
										fontSize: '8px'
									}
								}
							}],
							series: [{
								name: '收入',
								type: 'line',
								stack: '收入',
								//								areaStyle:{},
								itemStyle: {
									normal: {
										color: '#ED7D31',
										lineStyle: {
											color: '#ED7D31'
										}
									}
								},
								areaStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [],
										globalCoord: false // 缺省为 false
									}
								},
								data: []
							}]
						},
						lastPage: '',
						top: '1rem',
						chooseType: 1, //30天销售额  2 人均消费  3 消费时段分析
						mapData: [],
					}
				},
				mounted: function() {
					var vm = this
					mui.plusReady(function() {
						vm.receiveParams()
					});
					this.initCharts()
				},
				methods: {
					receiveParams: function() {
						var sf = plus.webview.currentWebview();
						this.currentShopObj = sf.currentShopObj;
						this.storeId = sf.storeId
						this.storeName = sf.storeName
						this.fromDate = sf.fromDate
						this.toDate = sf.toDate
						this.actnum = sf.actnum
						this.dateType = sf.dateType
						this.lastPage = sf.lastPage ? sf.lastPage : false
						if(this.lastPage) {
							this.closePage()
						}
					},
					initCharts: function() {
						var vm = this
						var leftPie = echarts.init(document.getElementById('left-pie'));
						leftPie.setOption(vm.pieOptions1);
						var rightPie = echarts.init(document.getElementById('right-pie'));
						rightPie.setOption(vm.pieOptions2)
						var lineChart = echarts.init(document.getElementById('line-chart'))
						lineChart.setOption(vm.lineOPtions)
					},
					loadData: function() {
						var vm = this;
						config.ajax({
							url: '/phone/storeIncome',
							data: {
								fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
								toDate: new Date(vm.toDate).format('yyyyMMdd'),
								storeId: vm.storeId,
								storeName: vm.storeName,
								type: vm.dateType
							},
							success: function(res) {
								console.log(JSON.stringify(res))
								if(res.result === 1) {
									vm.totalData = res.storeIncome;
									var atmTotal = ((vm.totalData.atmCash + vm.totalData.atmWeixin) / 100 + vm.totalData.atmDiamond / 10)
									var cardTotal = (vm.totalData.cardCash + vm.totalData.cardWeixin + vm.totalData.cardBank + vm.totalData.cardAlipay + vm.totalData.cardMeituanAmount) / 100
									var rechargeTotal = vm.totalData.recharge / 10;
									vm.pieOptions1.series[0].data = [{
											name: 'ATM销售',
											value: atmTotal
										},
										{
											name: '吧台销售',
											value: cardTotal
										},
										{
											name: '扫码直玩',
											value: rechargeTotal
										}
									]
									var weixinTotal = (vm.totalData.atmWeixin + vm.totalData.cardWeixin) / 100
									var cashTotal = (vm.totalData.atmCash + vm.totalData.cardCash) / 100
									vm.pieOptions2.series[0].data = [{
											name: '微信',
											value: weixinTotal
										},
										{
											name: '现金',
											value: cashTotal
										},
										{
											name: '支付宝',
											value: vm.totalData.cardAlipay / 100
										},
										{
											name: 'POS机',
											value: vm.totalData.cardBank / 100
										},
										{
											name: '美团',
											value: vm.totalData.cardMeituanAmount / 100
										}
									];
									vm.changeMap()
								} else {
									mui.toast(res.errormsg)
								}
							}
						})
					},

					toPage:function(url){
            var vm = this;
            var storeName=vm.storeName;
            mui.openWindow({
              url: './'+url+'.html',
              id: url,
              styles: {
                titleNView: {
                  titleText:  storeName+'吧台销售报告',
                  titleColor: "#FFFFFF",
                  titleSize: "17px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                storeId: vm.storeId,
                storeName: vm.storeName,
                fromDate: vm.fromDate,
                toDate:vm.toDate,
                dateType:vm.dateType,
                actnum: vm.actnum,
                lastPage: 'incomeItem',
              },
              createNew:true,
            });
					},

					toPage2: function(url) {
						var vm = this;
						var storeName = vm.storeName;
						mui.openWindow({
							url: './' + url + '.html',
							id: url,
							styles: {
								titleNView: {
									titleText: storeName,
									titleColor: "#FFFFFF",
									titleSize: "17px",
									backgroundColor: "#FF6800",
									autoBackButton: true,
									buttons: [{
										fontWeight: 'normal',
										fontSize: '18px',
										float: 'right',
										fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
										text: "\ue602",
										onclick: function() {
											var allPage = plus.webview.all()
											var nowPage = plus.webview.getWebviewById('index')
											for(var i = 0; i < allPage.length; i++) {
												if(allPage[i].getURL() !== nowPage.getURL()) {
													plus.webview.close(allPage[i]);
												}
											}
										}
									}],
									splitLine: {
										color: "#CCCCCC",
										height: "1px"
									}
								}
							},
							extras: {
								storeId: vm.storeId,
								storeName: vm.storeName,
								fromDate: vm.fromDate,
								toDate: vm.toDate,
								dateType: vm.dateType,
								actnum: vm.actnum,
								lastPage: 'incomeItem',
							},
							createNew: true,
						});
					},
					closePage: function() {
						var vm = this;
						var allPage = plus.webview.all()
						var nowPage = plus.webview.getWebviewById(vm.lastPage)
						for(var i = 0; i < allPage.length; i++) {
							if(allPage[i].getURL() === nowPage.getURL()) {
								plus.webview.hide(allPage[i]);
								plus.webview.close(allPage[i]);
							}
						}

					},
					//选择Fun   params  =chooseType
					choose: function(params) {
						var vm = this;
						if(params !== vm.chooseType) {
							vm.chooseType = params;
							vm.changeMap()
						}
					},
					//根据选择 绘制map
					changeMap: function() {
						var vm = this
						//选择不同 赋值不同的数组   //30天销售额  2 人均消费  3 消费时段分析
						if(vm.chooseType === 1) {
							vm.mapData = vm.totalData.incomeCurve;
							vm.lineOPtions.series[0].type = 'bar';
						} else if(vm.chooseType === 2) {
							vm.mapData = vm.totalData.perCapitaCsp;
							vm.lineOPtions.series[0].type = 'line';
						} else {
							vm.mapData = vm.totalData.cspPeriod;
							vm.lineOPtions.series[0].type = 'line';
						}
						var data = '',
							time = '',
							max = '';
						vm.lineOPtions.series[0].data = [], vm.lineOPtions.xAxis[0].data = [];
						vm.mapData.forEach(function(item, index) {
							if(vm.chooseType === 1) {
								data = item.income
								vm.lineOPtions.series[0].areaStyle.color.colorStops = []
							} else if(vm.chooseType === 2) {
								data = item.consumption
								vm.lineOPtions.series[0].areaStyle.color.colorStops = []
							} else {
								data = item.consumption
								vm.lineOPtions.series[0].areaStyle.color.colorStops = [{
										offset: 0,
										color: 'pink'
									}, // 0% 处的颜色
									{
										offset: 1,
										color: '#ED7D31'
									} // 100% 处的颜色
								]
							};
							data = (data * 1 / 100).toFixed(2)
							//时间处理
							time = JSON.parse(JSON.stringify(item.dateNo));
							if(vm.chooseType !== 3) {

								if(vm.dateType === 0) {
									time = (time + '').replace(/^(\d{4})(\d{2})(\d{2})$/, "$3");
								} else if(vm.dateType === 1) {
									time = time + '周'
								} else {
									time = (time + '').replace(/^(\d{4})(\d{2})$/, "$2") + '月'
								}
							}
							//y轴最大值判断
							if(Number(data) > max) {
								max = Number(data)
							}
							vm.lineOPtions.series[0].data.push(data)
							vm.lineOPtions.xAxis[0].data.push(time)
						});
						vm.lineOPtions.yAxis[0].max = Math.ceil(max > 5 ? max : 5);
						if(vm.chooseType !== 3) {
							var name = '近' + (vm.dateType === 0 ? '30天' : vm.dateType === 1 ? '12周' : '12个月') + (vm.chooseType === 1 ? '销售额' : vm.chooseType === 2 ? '人均消费' : '')
						} else {
							var name = (vm.dateType === 0 ? '当天' : vm.dateType === 1 ? '当周' : '当月') + '消费时段分析'
						}

						vm.lineOPtions.title.subtext = name;
						vm.lineOPtions.series[0].name = vm.chooseType === 1 ? '销售额' : vm.chooseType === 2 ? '人均消费' : '消费时段分析';
						vm.lineOPtions.legend.data[0] = vm.chooseType === 1 ? '销售额' : vm.chooseType === 2 ? '人均消费' : '消费时段分析';
						vm.initCharts()
					},

				},
				watch: {
					fromDate: function() {
						this.loadData()
					}
				}
			})
		</script>
	</body>

</html>